<template>
  <div class="ElectronicsBox">
    <p
      class="Ele"
      :style="{
        color: numColor,
        background: bgColor,
        fontSize: fontSize + 'px',
      }"
    >
      {{ displayNumber }}
    </p>
  </div>
</template>
<script>
import { ref, onMounted, onUnmounted } from "vue";
export default {
  name: "NumAnimation",
  // :eleNumber  显示数值   数字类型
  // :fontSize   数字大小   数字类型
  // :numColor   数字颜色   字符串
  // :bgColor    背景颜色   字符串     默认none
  // :numSpeed   增长速度   数字       毫秒   默认100
  // :numFrequency  增长频率  数字      越小越快    默认20
  props: {
    eleNumber: {
      type: Number,
      default: 99,
    },
    bgColor: {
      type: String,
      default: "#fff",
    },
    numColor: {
      type: String,
      default: "#000",
    },
    fontSize: {
      type: Number,
      default: 14,
    },
    numSpeed: {
      type: Number,
      default: 100,
    },
    numFrequency: {
      type: Number,
      default: 20,
    },
  },
  setup(props) {
    const MyEleNumber = ref(props.eleNumber); //显示目标数字
    const displayNumber = ref(0); //变化数字
    let numTime = null; //定时器
    onMounted(() => {
      animationNum();
    });
    // 清除定时器
    onUnmounted(() => {
      window.clearInterval(numTime);
      numTime = null;
    });
    // 数字变化逻辑
    const animationNum = function () {
      //默认每次添加 1
      let pace = 1;
      //numFrequency为1无动画，大于等于目标数字是，每次增加1
      if (MyEleNumber.value > props.numFrequency) {
        //大于20     例如：100 -->每次一添加 5
        pace = parseInt(MyEleNumber.value / props.numFrequency); //计算频率
      }
      numTime = setInterval(() => {
        displayNumber.value += pace; //数字加上变化的数量
        if (displayNumber.value >= MyEleNumber.value) {
          //变化的数大于或者等于输入的数
          clearInterval(numTime);
          numTime = null; //清空定时器
          displayNumber.value = MyEleNumber.value; //显示的数等于输入的数
        }
      }, props.numSpeed);
    };
    return {
      displayNumber,
    };
  },
};
</script>
<style lang="less" scoped>
/* 在main.js中引入电子数字样式 */
.Ele {
  // text-align: center;
  font-weight: 700;
  // font-family: ele;
  /* 字符左右间距 */
  // letter-spacing: 7px;
  /* font-size: 60px; */
  /* 文字填充色，和color一样 */
  /* color: #00ffff; */
  /* -webkit-text-fill-color: #00ffff; */
  /* 文字边框 */
  /* -webkit-text-stroke: 1px #000000;   */
}
.ElectronicsBox {
  width: 100%;
  height: 100%;
}
</style>
